
@set tags-view < std-tree-base 
{
  tags-view {
    prototype: TagsTree url(tags-view.tis);
    display:block;
    width:*;
    height:max-content;
    overflow-y: none;
    overflow-x: hidden;
    background: none;
    border:none;
    font: system;    
    //font-family:Verdana, sans-serif;
    font-size:13dip;
    //background: #333;  
    color: #fff;  
  }

  option {
    display: list-item;
    line-height: 22dip;
    min-height: 22dip;
    fill:#fff; 
    foreground-position: 5dip 6dip; 
    foreground-size: 13dip 13dip; 
    foreground-repeat:no-repeat;
    padding:0 0 0 20dip;     
  }

  option:rtl {
    padding:0 20dip 0 0;      
    foreground-position-left: auto;
    foreground-position-right: 5dip; 
  }

  option:not(:node) { 
    max-width:auto; width:*; background:none; margin-left:0; 
    foreground-image:url(path: M1664 896q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z); 
  }
  option:not(:node):rtl {  margin-right:4dip; margin-left:0;}  


  // caption
  option > text { flow:horizontal; width:*; background:none; padding:2dip 6dip 2dip 0; }

  option:not(:node):current > text,
  option:node:current > text 
  {
    background:var(selection-dark,#c2e5fe);
  }

  /* tree line support: */
  option > option
  {
    display: list-item;
    list-style-type: tree-line;
    list-marker-size:1px;
    list-marker-color:#ccc;
    list-marker-style:solid;      
  }
    
  //option:not(:node)     {  margin-left:8dip; }
  //option:not(:node):rtl {  margin-right:8dip; margin-left:0;}

  option > text:hover { foreground-color:var(selection-dark-hover,#0f0); }
  
  option > text > span.name {
    display:block;
    //font-weight:bold;
    width:max-content; 
    margin:* * * 0;
    white-space:pre;
    //border-radius:0 height(50%) height(50%) 0;  
    padding:0dip 0 2dip 4dip;
    //background-color:#fff;
    //color:#000;
    line-height: 18dip;
    height: 18dip;
  }

  /*option > text > i {
    display:block;
    width:1em;
    height:*;
    background-image: url(path: M1664 896q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z);
    background-repeat: no-repeat;
    background-size:1em;
    background-position:50% 50%;
  }*/

  option[color=0] { fill: @FC0; }
  option[color=1] { fill: @FC1; }
  option[color=2] { fill: @FC2; }
  option[color=3] { fill: @FC3; }
  option[color=4] { fill: @FC4; }
  option[color=5] { fill: @FC5; }
  option[color=6] { fill: @FC6; }

  option > text > span.name.editing {
    behavior:edit;
    background: #fff;
    color:#000;
    width:*; 
    margin-right:4dip;
    overflow-x: hidden-scroll;
  }

  option > text > span.count {
    display:block;
    width:max-content;
  }

  option:current span.count {
    color:#fff;
  }
    
  option:node:collapsed {  foreground-image:url(path:M1344 960v-128q0-26-19-45t-45-19h-256v-256q0-26-19-45t-45-19h-128q-26 0-45 19t-19 45v256h-256q-26 0-45 19t-19 45v128q0 26 19 45t45 19h256v256q0 26 19 45t45 19h128q26 0 45-19t19-45v-256h256q26 0 45-19t19-45zm320-64q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z); }
  option:node:expanded { foreground-image:url(path:M1344 960v-128q0-26-19-45t-45-19h-768q-26 0-45 19t-19 45v128q0 26 19 45t45 19h768q26 0 45-19t19-45zm320-64q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z); }

  :root > option > text {
     context-menu: selector(menu#tag);
     color:#fff;
  }

}

tags-view { 
  style-set: tags-view; 
}



